<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>局部注册</title>
        <script src="vue@3.2.26.js"></script>
    </head>
    <body>

        <h3>在 Vue.js 3 中局部注册组件</h3>

        <div id="root">
            <p>在根组件中使用 button-counter 组件</p>
            <button-counter></button-counter>

            <wrapper></wrapper>
        </div>

        <script type="text/javascript">

            // 1、定义组件
            const componentDefinition = {
                // 为组件指定模板
                template: `<button @click="handle"> 你点了我 {{ counter }} 次 </button>`,
                // 为组件指定 Data Property
                data(){
                    return {
                        counter: 0
                    }
                },
                // 为组件指定方法
                methods: {
                    handle(){
                        // 注意，这里的 this 表示当前组件
                        console.log( this );
                        this.counter++ ;
                    }
                }
            }

            const options = {
                // 2、为根组件注册子组件(局部注册)
                components: {
                    'button-counter' : componentDefinition ,
                    'wrapper' : {
                        template: `<div style="border:1px solid blue ; margin : 15px auto ;">
                                        <div>在非根组件中使用另一个在根组件局部注册的组件时会失败</div>
                                        <div>Failed to resolve component: button-counter (在浏览器的终端中查看)</div>
                                        <button-counter></button-counter>
                                   </div>`
                    }
                }
            }

            // 创建一个Vue应用
            const app = Vue.createApp( options );

            const vm = app.mount( "#root" );
            console.log( vm );
        </script>
        
    </body>
</html>